<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <!-- import Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数字变大10倍
            需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
         -->
        <div id="root">
            <h2>{{name}}</h2>
            <h2>当前的n值是：<span v-text="n"></span></h2>
            <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
            <button @click="n++">点我n+1</button>
            <hr/>
            <input type="text/javascript" v-fbind:value="n">
            <input type="text/javascript" v-fbind222:value="n">
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

        // 定义全局指令
        Vue.directive('fbind222', {
            // 指令与元素成功绑定时（一上来）
            bind(element,binding){
                element.value = binding.value;
            },
            // 指令所在元素被插入页面时
            inserted(element,binding){
                element.focus();
            },
            // 指令所在的模板被重新解析时
            update(element,binding){
                element.value = binding.value;
            }
        })

        new Vue({
            el:'#root',
            data:{
                name:'hello',
                n:1,
            },
            directives:{
                // big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时。
                big(element,binding){
                    console.log('big bind',element,binding)
                    element.innerText = binding.value * 10
                },
                fbind:{
                    // 指令与元素成功绑定时（一上来）
                    bind(element,binding){
                        element.value = binding.value;
                    },
                    // 指令所在元素被插入页面时
                    inserted(element,binding){
                        element.focus();
                    },
                    // 指令所在的模板被重新解析时
                    update(element,binding){
                        element.value = binding.value;
                        element.focus();
                    }
                }
            }
        })
        
    </script>
</html>